//充币
<template>
    <div class="coin-in">
        <!-- <b-container class="user_coinin_chosen">
          <b-row>
            <! 币种选择
            <b-col lg="12" class="coinin_chosen">
              <span>{{$t('u_bzxz')}}：</span>
              <ul>
                <li class="chosen-item" :class="isActive == index ? 'active' : ''" @click="coinSelect(index)" v-for="(list,index) in coinTypes" :key="index">{{list.coinType}}</li>
              </ul>
            </b-col>
          </b-row>
          <!二维码
          <b-row>
            <b-col lg="3" md="3" class="qrcode">
              <div id="qrs"></div>
              <div class="pay-msg" v-if="coin_hkt">请使用支付宝扫描支付</div>
            </b-col>
            <b-col lg="7" md="7" class="pay-address" v-if="!coin_hkt">
              <p>
                <span style="float: left;">{{coinType}}{{$t('u_qbdz')}}：</span>
                <textarea readonly="readonly" id="copy" rows="1" style="border: none;resize:none;background: transparent;width: 80%;overflow: hidden;text-overflow:ellipsis;">{{coinCode}}</textarea>
              </p>
              <div class="pay-address-btn" @click="copy()">{{$t('u_fzqbdz')}}</div>
            </b-col>
            <b-col lg="7" md="7" class="pay-address" v-else>
              <div class="hkt-text">1. 1HKT=1港币</div>
              <div class="hkt-text">2. 入金手续费3%</div>
              <div class="hkt-text">3. 入金金额大于5000 请加官方客服 best-lxmy7</div>
            </b-col>
          </b-row>
          <div class="chosen-line"></div>
          <b-row>
            <b-col lg="6" md="6" class="chosen-tips-text">
              <p>{{$t('u_zrxzcdz')}}</p>
            </b-col>
            <b-col lg="6" md="6" class="chosen-tips-text">
              <p>{{$t('u_bdzjzcz')}}{{coinType}}{{$t('u_bkzh')}}</p>
            </b-col>
          </b-row>
        </b-container> -->
        <!-- 交易记录表格 -->
        <!--<b-table  responsive="md" hover :fields="fields" :items="items">
              <template slot="status" scope="data">
                  <span>{{data.item.status}}</span>
              </template>
          </b-table>-->
        <!-- 交易记录表格 -->
        <!-- <div @click="ddd()">ddd</div>查看数据 -->
        <div style="margin-bottom: 10px;margin-left: 30px; margin-right:30px;display: flex;justify-content: space-between;align-items: center;">
            <!--开始日期：{{startTm}} 结束日期：{{endTm}}-->
            <div>日期：
                <el-date-picker
                        v-model="value1"
                        type="daterange"
                        @change="getDate"
                        value-format="timestamp"
                        range-separator="至"
                        start-placeholder="开始日期"
                        :picker-options="endDateOpt"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div>
                <el-button @click="getUserWithdrawHis2" type="primary">查询</el-button>
            </div>
        </div>
        <div style="width: 100%;overflow: auto;padding: 0 30px;" class="in-table">
            <table>
                <tr>

                    <th style="padding-left:0;width:150px">{{$t('u_sj')}}</th>
                    <!-- <th width="220px">{{$t('u_zrqbdz')}}</th> -->
                    <th>{{$t('h_bz')}}</th>
                    <th>{{$t('cbsl')}}</th>
                    <!-- <th>{{$t('u_qrcs')}}</th> -->

                    <th>{{$t('u_zt')}}</th>
                    <th>{{$t('cbbz')}}</th>
                    <th style="width: 30%;">{{$t('haxizhi')}}</th>
                </tr>
                <tr v-for="(list,index) in items" :key="index">

                    <td>
                        <div style="width:170px; margin-left: -9px;">{{list.createTm}}</div>
                    </td>
                    <!-- <td style="padding-right:1.8rem">
                      <div>{{list.address}}</div>
                    </td> -->
                    <td>{{list.coinType}}</td>
                    <td>{{list.value}}{{list.coinType}}</td>
                    <!-- <td>{{list.comfirmCount}}</td> -->
                    <td>{{list.status}}</td><!-- :style="{color:list.color}" -->
                    <td>{{list.remark}}</td>
                    <td>
                        <div v-if="list.status != $t('shibai')" class="txid-btn"
                             @click="gotoall(list.coinType,list.txid)">{{list.txid}}
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="page-pagination" style="margin-top: 20px;margin-right: 31px;">
            <div style="float: left;margin-left: 30px">合计：{{sumAmount}}</div>
            <b-pagination align="right" :total-rows="total" v-model="currentPage" :per-page="rows">
            </b-pagination>
            <ul>

            </ul>
        </div>
        <!-- Modal Component -->
        <!-- <b-modal id="modalPrevent" ref="modal" title="充值金额" @ok="handleOk" @shown="clearamount">
          <form @submit.stop.prevent="handleSubmit">
            <b-form-input type="text" placeholder="请输入您的充值金额" v-model="amount"></b-form-input>
          </form>
          <div slot="modal-ok">确定</div>
          <div slot="modal-cancel">取消</div>
        </b-modal> -->

    </div>
</template>

<script>
    import {mapActions} from "vuex";
    import QRCode from "qrcodejs2";
    import {dateFormat} from "../../assets/js/common.js";
    import zhanwei from "../../assets/img/zhanwei.jpg";
    import mixins from "../../assets/js/mixin";

    export default {
        mixins: [mixins],
        data() {
            return {
                qrcode: null,
                coinCode: "",
                coinType: "",
                opType: 1,
                isActive: 0,
                coinTypes: [],
                currentPage: 1,
                coinTypeIndex: "",
                rows: 10,
                fields: [
                    {key: "createTm", label: this.$t("u_sj")},
                    {key: "address", label: this.$t("u_zrqbdz")},
                    {key: "value", label: this.$t("u_zrsl")},
                    {key: "comfirmCount", label: this.$t("u_qrcs")},
                    {key: "status", label: this.$t("u_zt")},
                    {key: "remark", label: this.$t("u_beiz")},
                    {key: "txid", label: this.$t("u_jlid")}
                ],
                items: [],
                total: 0,
                coinType_query: "",

                amount: "",   //充值金额

                coin_hkt: false,  // 是否是 hkt
                page: 1,
                checkOrderTimer: null,
                checkOrderTimerNum: 0,
                sumAmount: 0,
                startTm: (new Date().getTime() - 3600 * 1000 * 24 * 7),
                endTm: new Date().getTime(),
                value1: [(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()],
                endDateOpt: {
                    disabledDate(time) {
                        return time.getTime() > new Date();
                    }
                },

            };
        },
        methods: {
            ddd() {
                console.log(this.items)
            },
            gotoall(cointype, url) {
                switch (cointype) {
                    case 'USDT':
                        return window.open('https://www.blockchain.com/btc/tx/' + url);
                        break;
                    default:
                        window.open('https://etherscan.io/tx/' + url);
                }
            },
            clearamount() {
                this.amount = ''
            },
            getDate(e) {
                console.log(e);
                console.log(this.value1);
                this.startTm = this.value1[0]
                this.endTm = this.value1[1]
            },
            getDate2() {

            },
            getUserWithdrawHis2() {
                this.currentPage = 1
                this.getUserWithdrawHis()
            },
            handleOk(evt) {
                // Prevent modal from closing
                evt.preventDefault()
                if (!this.amount) {
                    alert('请输入充值金额')
                } else {
                    this.handleSubmit()
                }
            },
            handleSubmit() {
                let reg = /^[0-9]+([.]\d{0,2})?$/
                if (!this.amount) {
                    alert('请输入充值金额')
                    return
                }
                console.log(reg.test(this.amount));
                if (!reg.test(this.amount)) {
                    alert('最多两位小数')
                    return
                }
                if (this.amount > 5000) {
                    alert('出金金额大于5000 请加官方客服 best-lxmy7');
                    return
                }
                this.clearamount()
                this.$refs.modal.hide()

            },
            getUserWithdrawHis() {
                var _self = this;
                this.ifLoadingChange(true);
                _self.$http
                    .get(_self.service + "/coin/user/record/list", {
                        params: {
                            opType: 1,
                            // coinType: _self.coinType,
                            index: this.currentPage,
                            rows: _self.rows,
                            startTime: _self.startTm,
                            endTime: _self.endTm
                        }
                    })
                    .then(function (res) {
                        if (res.data.code == "001") {
                            var tableData = res.data.result.data;
                            for (var i in tableData) {
                                var dataTm = new Date(tableData[i].createTm);
                                var createTm = dateFormat(dataTm, "Y-m-d H:m:s");
                                tableData[i].createTm = createTm;
                                if (tableData[i].status == "0") {
                                    tableData[i].status = _self.$t("querenz");
                                    tableData[i].color = "orange";
                                } else if (tableData[i].status == "1") {
                                    tableData[i].status = _self.$t("chenggong");
                                    tableData[i].color = "green";
                                } else {
                                    tableData[i].status = _self.$t("shibai");
                                    tableData[i].color = "red";
                                }
                            }
                            _self.items = tableData;
                            _self.total = res.data.result.total;
                            _self.sumAmount = res.data.result.subs || 0;
                        }
                    });
            },
            // rechagerCoinAddresss: function () {
            //   var _self = this;
            //   this.ifLoadingChange(true);
            //   _self.$http
            //     .get(_self.service + "/coin/rechagerCoinAddress", {
            //       params: {
            //         coinType: _self.coinType
            //       }
            //     })
            //     .then(function (res) {
            //       if (res.data.code == "001") {
            //         _self.coinCode = res.data.result.data;
            //         _self.initQr(_self.coinCode);
            //       } else {
            //         _self.coinCode = "";
            //         $("#qrs")
            //           .find("img")
            //           .attr("src", zhanwei);
            //         $("#qrs").attr("title", "");
            //       }
            //     });
            // },
            // //选择币种
            // coinSelect: function (index) {
            //   this.coinType = this.coinTypes[index].coinType;
            //   this.isActive = index;
            //   this.getUserWithdrawHis(1);
            //   if (this.coinType == 'HKT') {
            //     console.log('hkt');
            //     this.coin_hkt = true
            //     this.$refs.modal.show()
            //     $('#qrs').empty();
            //     this.qrcode = null;
            //   } else {
            //     this.coin_hkt = false
            //     this.rechagerCoinAddresss();

            //   }

            // },
            //币种种类
            coinList: function () {
                var _self = this;
                return _self.$http
                    .get(_self.service + "/coin/recharge/list", {
                        params: {}
                    })
                    .then(function (res) {
                        if (res.data.code == "001") {
                            _self.coinTypes = _self.filterCoinList(res.data.result.data);
                            // _self.coinTypes = _self.parseCoinList(res.data.result.data);
                            _self.coinTypeIndex = _self.getIndex(_self.coinTypes);
                            _self.coinType = _self.coinTypes[0].coinType;
                            if (_self.coinTypeIndex) {
                                _self.isActive = _self.coinTypeIndex;
                                _self.coinType = _self.coinTypes[_self.coinTypeIndex].coinType;
                            }
                            if (_self.coinTypes && _self.coinTypes.length > 0) {
                                _self.getUserWithdrawHis(1);
                            }

                        }
                    });
            },
            //分页


            //复制
            copy: function () {
                var code = document.getElementById("copy");
                code.select();
                document.execCommand("Copy");
                this.$swal("复制成功", {
                    icon: '/static/img/dagou.png'
                });
            },
            initQr: function (url) {
                if (this.qrcode) {
                    this.qrcode.clear(); // 清除代码
                    this.qrcode.makeCode(url); // 生成另外一个二维码
                } else {
                    this.qrcode = new QRCode("qrs", {
                        text: url,
                        width: 128,
                        height: 128,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                }
            },
            getIndex(data) {
                let index = 0;
                for (let i in data) {
                    if (this.coinType_query == data[i].coinType) {
                        index = i;
                    }
                }
                return index || 0;
            },
            // showTxid(id) {
            //   this.$swal(id);
            // },
            filterCoinList(data) {
                let newData = [];
                for (const i in data) {
                    if (data[i].operateStatus == "1" || data[i].operateStatus == "2") {
                        newData.push({
                            coinName: data[i].coinName,
                            coinType: data[i].coinType,
                            moneyType: data[i].moneyType,
                            operateStatus: data[i].operateStatus,
                            status: data[i].status
                        });
                    }
                }
                if (newData.length <= 0) {
                    return null;
                }
                return newData;
            },
            parseCoinList(data) {
                let coinList = new Map();
                let arr = [];
                for (const i in data) {
                    for (const j in data[i].coinList) {
                        if (data[i].coinList[j].operateStatus == "1" || data[i].coinList[j].operateStatus == "2") {
                            coinList.set(data[i].coinList[j].coinType, data[i].coinList[j]);
                        }
                    }
                }
                coinList.forEach(function (value, key) {
                    arr.push(value)
                });
                return arr;
            },
            ...mapActions(["coinTabActiveChange", "ifLoadingChange"])
        },
        created() {
            // this.exists(); // 验证是否绑定手机
            this.coinType_query = this.$route.query.coinType || "";

            // this.getUserWithdrawHis(1);
            this.coinTabActiveChange(0);
            this.getUserWithdrawHis()
        },
        watch: {
            currentPage(newval) {

                this.getUserWithdrawHis();
            }
        },
        beforeDestroy() {
            this.checkOrderTimer && clearInterval(this.checkOrderTimer)
        }
    };
</script>

<style lang="scss" scoped>
    .el-date-editor .el-range-separator {
        padding: 0;
    }

    .hkt-text {
        font-size: 16px;
        color: #333;
        line-height: 24px;
    }

    .pay-msg {
        text-align: center;
        font-size: 16px;
        line-height: 26px;
        color: #666;
    }

    .coin-in {
        padding-top: 30px;
        min-height: 600px;

        .user_coinin_chosen {
            background: #f8f8f8;
            border: 1px solid #eee;
            // min-height: 345px;
            margin-bottom: 30px;
        }

        .in-table {
            width: 100%;
            overflow: auto;
        }

        .in-table table {
            width: 100%;
            min-width: 850px;
            // border-top: 1px #eee solid;
        }

        .in-table table tr {
            border-bottom: 1px solid rgba(153, 167, 200, 0.2);
        }

        .in-table tr {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #546EAA;
            letter-spacing: 0;
        }

        .in-table tr:nth-child(1) th {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #99A7C8;
            letter-spacing: 0;
        }

        /deep/ .in-table tr th:nth-child(6), .in-table tr td:nth-child(6) {
            max-width: 300px;
            padding-right: 0;
            text-align: right;
        }

        .in-table tr th,
        .in-table tr td {
            padding: 10px;
            // border-bottom: 1px #eee solid;
            font-weight: normal;
            font-size: 14px;
        }

        .in-table tr th,
        .in-table tr td {
            text-align: center
        }

        .in-table tr th:nth-child(1),
        .in-table tr td:nth-child(1) {
            // border-bottom: 1px #eee solid;
            text-align: left
        }

        .in-table tr td div {
            line-height: 20px;
        }

        .coinin_chosen {
            padding: 25px 10px;
            display: flex;

            span {
                width: 80px;
                line-height: 24px;
            }

            ul {
                flex: 1;
            }

            li {
                font-size: 14px;
                line-height: 24px;
                color: #333333;
                float: left;
            }

            .chosen-item {
                margin: 0 10px;
                padding: 0 10px;
                cursor: pointer;
                list-style: none;

                &:hover,
                &.active {
                    color: #fff;
                    background: #2d6df0;
                    border-radius: 2px;
                }
            }
        }

        .qrcode {
            img {
                display: block;
                margin: 0 auto;
                width: 160px;
                height: 160px;
            }
        }

        .pay-address {
            p {
                margin-top: 23px;
                line-height: 24px;
                margin-bottom: 30px;
                font-size: 14px;
                color: #333;
                width: 100%;
                text-align: center;
            }

            .pay-address-btn {
                width: 161px;
                height: 45px;
                text-align: center;
                line-height: 45px;
                background: #2d6df0;
                color: #fff;
                font-size: 16px;
                border-radius: 20px;
                margin: 0 auto;
                cursor: pointer;
            }
        }

        .chosen-line {
            width: 100%;
            height: 30px;
            border-bottom: 1px dashed #d2d2d2;
        }

        .chosen-tips-text {
            padding: 15px 15px;

            p {
                font-size: 12px;
                color: #999;
            }
        }

        .txid-btn {
            width: 98%;
            height: 30px;
            text-align: center;
            line-height: 30px !important;
            border-radius: 4px;
            background-color: #fff;
            color: #546eaa;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }

        .txid-btn:hover {
            color: #3498db
        }
    }
</style>


